import React,{Component} from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import NavBar from './pages/component/NavBar/index.js';
import Layout from './pages/Home/Layout.js'
import Recommend from './pages/Home/Recommend'
import Signer from './pages/Home/Singer'
import RankingList from './pages/Home/RankingList'
import Search from './pages/Search';
import SongSheet from './pages/SongSheet/index.js';
import SingerSheet from './pages/SingerSheet/index.js';
import AudioDetail from './pages/AudioDetail/index.js';


class AppRouter extends Component {
    
    render(){
        return (
            <Router>
    
                <Switch>
                    <Route exact path="/search" component={Search}></Route>
                    <Route exact path="/songsheet" component={SongSheet}></Route>
                    <Route exact path="/singersheet" component={SingerSheet}></Route>
                    <Route exact path="/audiodetail" component={AudioDetail}></Route>
                    <Layout path="/">
                        <NavBar />
                        <Switch>
                            <Route exact path="/" component={Recommend}></Route>
                            <Route exact path="/signer" component={Signer}></Route>
                            <Route exact path="/rankinglist" component={RankingList}></Route>
                        </Switch>
                    </Layout>
    
                </Switch>
            </Router>
        );
    }
}

export default AppRouter;